<script setup>

const router = useRouter()
const route = useRoute()
const isMenuOpen = ref(false)

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
  document.body.style.overflow = isMenuOpen.value ? 'hidden' : ''
  document.body.style.position = isMenuOpen.value ? 'fixed' : ''
}

const links = [
  { id: 1, title: "首页", link: "/home", icon: "home" },
  { id: 2, title: "文章", link: "/posts", icon: "posts" },
  { id: 3, title: "代码", link: "/code", icon: "code" },
  { id: 4, title: "记录", link: "/timelines", icon: "timelines" },
  { id: 6, title: "关于", link: "/about", icon: "about" }
]

const getUrlImg = (icon) => {
  return new URL(`../assets/image/nav/${icon}.svg`, import.meta.url).href
}

const handleNavigation = (link) => {
  router.push(link)
  if (window.matchMedia('(max-width: 1024px)').matches) {
    isMenuOpen.value = false
    document.body.style.overflow = ''
  }
}

const isActiveRoute = (link) => {
  return route.path === link ||
    (link !== '/home' && route.path.startsWith(link))
}
</script>
<template>
  <header class="header-container" :class="{ 'menu-open': isMenuOpen }">
    <div class="header-content">
      <div class="logo">
        <img src="../assets/image/logo.svg" alt="">
      </div>

      <button class="hamburger" @click="toggleMenu" :aria-expanded="isMenuOpen" aria-label="Toggle navigation menu">
        <span></span>
        <span></span>
        <span></span>
      </button>

      <nav class="nav-links" :class="{ 'open': isMenuOpen }" aria-hidden="!isMenuOpen">
        <ul class="nav-list">
          <li v-for="item in links" :key="item.id" class="nav-item" @click="handleNavigation(item.link)">
            <img :src="getUrlImg(item.icon)" alt="icon">
            <span :class="{ 'active': isActiveRoute(item.link) }">{{ item.title }}</span>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<style lang="scss" scoped>
/* 基础样式 */
.header-container {
  --mobile-breakpoint: 1024px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--height);
  z-index: 1000;
  background-color: var(--header-bg);
  transition: opacity var(--transition-duration) ease-out;
  user-select: none;
  will-change: opacity;
  /* 移除backdrop-filter提升性能 */

  &.menu-open {
    background-color: var(--white);
  }
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
  box-sizing: border-box;
}

/* 桌面导航样式 */
.nav-links {
  .nav-list {
    display: flex;
    gap: var(--gap);
    list-style: none;
    margin: 0;
    padding: 0;

    .nav-item {
      position: relative;
      display: flex;
      align-items: center;
      gap: calc(var(--space) - 2px);
      cursor: pointer;
      transition: opacity 0.3s ease;
      height: var(--height);

      img {
        width: 16px;
        height: 16px;
      }

      span {
        font-size: var(--font-size);
        transition: color 0.2s ease;
        color: var(--color);
      }

      &:hover span {
        color: var(--primary-hover);
      }

      span.active {
        color: var(--primary-color);
        font-weight: 500;
      }

      img.active {
        filter: var(--primary-filter);
      }
    }
  }
}

/* 移动端汉堡菜单按钮 */
.hamburger {
  display: none;
  position: relative;
  width: 25px;
  height: 15px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1100;

  span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color);
    border-radius: 3px;
    transition: all 0.3s ease;

    &:nth-child(1) {
      top: 0;
    }

    &:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }

    &:nth-child(3) {
      bottom: 0;
    }
  }

  .header-container.menu-open & {
    span:nth-child(1) {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }

    span:nth-child(2) {
      opacity: 0;
    }

    span:nth-child(3) {
      bottom: 50%;
      transform: translateY(50%) rotate(-45deg);
    }
  }
}

/* 响应式设计 - 移动端 */
@media (max-width: 1024px) {
  .hamburger {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: var(--height);
    left: 0;
    width: 100%;
    min-height: calc(100vh - var(--height));
    max-height: calc(100vh - var(--height));
    background: var(--white);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    align-items: center;
    /* 修改初始 clip-path 位置到右上角 */
    clip-path: circle(0% at 100% 0);
    transition:
      clip-path var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.2s ease-out;
    pointer-events: none;
    overflow: hidden;
    box-sizing: border-box;
    will-change: clip-path;
    opacity: 0;

    &.open {
      /* 确保打开时覆盖整个区域 */
      clip-path: circle(150% at 50% 50%);
      pointer-events: all;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      opacity: 1;
    }

    @media (orientation: landscape) and (max-width: 1024px) {
      padding: 8px 0;
      justify-content: flex-start;

      .nav-list {
        gap: 12px;

        .nav-item {
          gap: 8px;
          padding: 6px 0;

          img {
            width: 20px;
            height: 20px;
          }

          span {
            font-size: 14px;
          }
        }
      }
    }

    .nav-list {
      flex-direction: column;
      gap: calc(var(--space) / 2);
      text-align: center;

      .nav-item {
        opacity: 0;
        transform: translateY(10px);
        transition:
          opacity 0.3s ease-out,
          transform 0.3s ease-out;
        will-change: opacity, transform;
        gap: 1rem;

        img {
          width: var(--gap);
          ;
          height: var(--gap);
          ;
        }

        span {
          font-size: 18px;
          white-space: nowrap;

          &.active {
            color: var(--primary-color);
            font-weight: 500;
          }
        }

        img {
          &.active {
            filter: var(--primary-filter);
          }
        }

        @for $i from 1 through 6 {
          &:nth-child(#{$i}) {
            transition-delay: $i * 0.1s;
          }
        }
      }
    }

    &.open .nav-list .nav-item {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* 响应式设计 - 桌面端覆盖 */
@media (min-width: 1025px) {
  .nav-links {
    &.open {
      position: static;
      height: auto;
      background: transparent;
      backdrop-filter: none;
      clip-path: none !important;
      pointer-events: all !important;
      padding-top: 0;

      .nav-list {
        flex-direction: row;

        .nav-item {
          opacity: 1 !important;
          transform: none !important;
          transition-delay: 0s !important;
        }
      }
    }
  }
}

/* 无障碍优化 */
@media (prefers-reduced-motion: reduce) {

  .header-container,
  .nav-links,
  .nav-item {
    transition: none !important;
  }

  .nav-links {
    &.open {
      clip-path: none !important;
    }

    .nav-item {
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

/* 移除全局 .active 样式，已移至具体元素 */
</style>